<template>
  <main-container>
    <template #logo="{ collapse }">
      <div class="logo">
        <img
          alt="logo"
          :class="[collapse ? 'logo-collapse' : 'logo-complete']"
          :src="logo(collapse)"
        />
      </div>
    </template>
    <template #aside="{ collapse }">
      <by-command
        :capture-empty-layer="false"
        layer="menu"
        :command="menuCommand"
        :collapse="collapse"
        @command="onCommand"
      />
    </template>
    <by-command capture-empty-layer layer="main" :command="main" />
  </main-container>
</template>

<script lang="ts" setup>
  import MainContainer from '../components/layout/MainContainer.vue';
  import ByCommand from '../components/view/ByCommand.vue';
  import { ref } from 'vue';
  import { CommandOptions } from '../components/core';
  const props = defineProps<{
    menu: string;
  }>();
  const menuCommand = ref<CommandOptions>({
    url: props.menu,
    layer: 'menu'
  });
  function logo(collapse: boolean) {
    return collapse ? '/public/logo.30.30.png' : '/public/logo.193.70.png';
  }
  const main = ref<CommandOptions>({});
  function onCommand(command: CommandOptions) {
    // console.log(JSON.stringify(command));
    if (!command) return;
    // main
    if (!command.layer || command.layer === 'main') {
      main.value = command;
      return;
    }
    //menu
    if (command.layer === 'menu') {
      menuCommand.value = command;
      return;
    }
  }
</script>

<style scoped>
  .logo {
    height: 70px;
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
  }
</style>
